<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、引入vue.js -->
    <script src="./js/vue.js"></script>
    <!-- 给元素设置样式需要定义style标签 -->
    <style>
        .container {
            /* 设置宽度为100像素 */
            width: 900px;
            /* 使用弹性盒模型布局 */
            display: flex;
        }
        /* 选择class类名称为box的标签 */
        .box {

            /* 设置宽度为100像素 */
            width: 100px;
            /* 设置宽度为30像素 */
            height: 30px;
            /* 设置1像素的边框 */
            border: 1px solid #ccc;

            /* 垂直居中 技巧（设置和该元素高度一致）*/
            line-height: 30px;

            /* 水平居中 text-align默认对齐方式为left*/
            text-align: center;
            
            /* 边框 外边距不计入盒模型 */
            box-sizing: border-box;

        }
    </style>
</head>

<body>
    <!-- 2、创建视图 -->
    <div id="app">
        <!-- 从1循环到9 -->
        <!-- 外层循环控制高度 -->
            <div v-for="item in 9" class="container">
                <!-- 内层循环控制宽度 -->
                <div v-for="i in item" class="box">
                    {{item}}*{{i}} = {{item*i}}
                </div>
            </div>
      
    </div>
</body>

</html>
<!-- 3、创建Vue实例 -->
<script>
    new Vue({
        el: "#app", //必填项，用来进行绑定
        //用来存放数据
        data() {
            return {

            }
        },
    })

</script>